<template>
	<view class="page">
		<view class="backgroun-gradual-red-little-origin padding-30 b-r-10 line-white">
			<view class="flex justify-between">
				<view>
					<text class="">可结算分红</text>
					<view class="mt-10">
						<text class="fsize-28">￥</text>
						<text class="fsize-50">{{shareholderData.bonusBalance}}</text>
					</view>
				</view>
				<view class="store-btn flex" @click="onEmit">
					<text>进入</text>
					<view>
						<uni-icons custom-prefix="iconfont" type="icon-dianpu1" color="#e94566" size="18"/>
					</view>
					<text>商城</text>
				</view>
			</view>
			<view class="flex justify-between align-center fsize-28 mt-20 text-align-center pl-20 pr-20">
				<view class="" @click="$u.route('/pages/shop/IncentivePolicy/list', {id: userInfo.userId, userName:userInfo.userName})">
					<view>{{shareholderData.mustTocashBonus}}</view>
					<view class="mt-10">待发放</view>
				</view>
				<view class="" @click="$u.route('/pages/finance/stockList', {id: userInfo.userId, userName:userInfo.userName})">
					<view>{{shareholderData.stockAmount}}</view>
					<view class="mt-10">当前股本</view>
				</view>
				<view class="" @click="$u.route('/pages/index/customer')">
					<view>{{shareholderData.userCount}}</view>
					<view class="mt-10">客户总数</view>
				</view>
			</view>
		</view>
		<view class="ugrid mt-60 pb-20">
			<u-grid :col="4" :border="false">
				<u-grid-item v-for="(nItem,nIndex) in navList" :key="nIndex" @click="openPage(nItem.router)">
					<uni-icons custom-prefix="iconfont" :type="nItem.icon" color="#e45d57" size="32"/>
					<text class="grid-text">{{nItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="mt-40 flex justify-between align-center padding-30 backgroun-gradual-origin-yellow border-radius-10">
			<view class="line-brown">
				<view class="fweigh-600">我的请客礼包</view>
				<view class="mt-10">分享专属请客礼包给好友</view>
			</view>
			<view 
				class="padding-20 line-red fsize-24" 
				@click="$u.route('/pages/shop/GiftPack/tokerList', {id: userInfo.userId, userName:  userInfo.userName})"
			>
				立即分享
			</view>
		</view>
		<view class="padding-20 flex justify-between align-center bg-plain mt-30 border-radius-10" v-if="shareholderData.managerName">
			<view>
				<text>{{shareholderData.managerName}}</text>
				<text class="bg-red ml-10 fsize-24 border-radius-tl-16 border-radius-br-16 pl-16 pr-16">您的专属管家</text>
			</view>
			<!-- @click.stop="phoneCall(shareholderData.managerPhone)" -->
			<view @click.stop>
				<!-- <uni-icons custom-prefix="iconfont" type="icon-phone" color="#e54d42" size="30"/> -->
				<u-tooltip :text="shareholderData.managerPhone" overlay></u-tooltip>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			userInfo:{
				type:Object,
				default:{}
			},
			shareholderData:{}
		},
		data() {
			return {
				navList: [
					{ 
						icon: 'icon-fenhong', 
						title: '分红记录', 
						router: `/pages/shop/IncentivePolicy/list?id=${this.userInfo.userId}&&userName=${this.userInfo.userName}`
					},
					{ 
						icon: 'icon-caiwuliushui', 
						title: '股本记录', 
						router:`/pages/finance/stockList?id=${this.userInfo.userId}&&userName=${this.userInfo.userName}`
					},
					{ 
						icon: 'icon-jiesuan', 
						title: '结算记录', 
						router: `/pages/finance/settlementList?id=${this.userInfo.userId}&&userName=${this.userInfo.userName}`
					},
					{ 
						icon: 'icon-fenhongqingkuang', 
						title: '分红提现', 
						router: `/pages/shop/Shareholder/cashOut`,
					}
				],
				data: {},
			}
		},
		created() {
			// this.getData()
		},
		methods: {
			onEmit(){
				this.$emit('toStore')
			},
			phoneCall(num){
				uni.makePhoneCall({ phoneNumber: num })
			},
			getData(){
				this.$reqJsonPost('GetStockHolderDetails',{id: this.userInfo.userId}).then(res=>{
					this.data = res.data
				})
			},
			openPage(url) {
				if (url !== undefined) {
					uni.$u.route(url);
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		padding: 0 20rpx;
		.ugrid {
			.ugrid-title {
				padding: 20rpx 20rpx 0 20rpx;
				font-size: 28rpx;
				font-weight: 600;
			}
			.grid-text {
				font-size: 28rpx;
				padding: 10rpx 0 20rpx 0rpx;
			}
		}
		.table-box {
			margin-top: 30rpx;
			padding: 40rpx 40rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.08);
			border-radius: 10rpx;
			background: #fff;
		}
	}
</style>
